<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import Qjss from './qjss/Index.vue'
import Tdjdev from './tdjdev/Index.vue'
import Jcdev from './jcdev/Index.vue'
import MonitorPop from './pop/MonitorPop.vue'
import RiseLandPop from './pop/RiseLandPop.vue'
import EquipmentPop from './pop/EquipmentPop.vue'
import Radar from './radar/Radar.vue' //雷达组件
import Qxzb from '@/views/infrastructure/qxzb/index.vue'
import { usePopStore } from '@/stores'
import {
  infrastructureInit,
  infrastructureClear,
  addQjss,
  addTdj,
  addJsdev,
  addRadar
} from './js/infrastructure'
import Radarjs from './radar/radar'
import { useFlyNumStore } from '@/stores/modules/flynum'
const flyNumStore = useFlyNumStore()
const showUi = computed(() => flyNumStore.showUi)
const list = ref(['起降设施', '通信基站', '监视设备', '气象设备'])
const currentBar = ref(list.value[0])
const popStore = usePopStore()
const chosedBar = (item) => {
  flyNumStore.setRadioShow(false)
  flyNumStore.setShowUi(false)
  popStore.RiseLand.showPop = false
  popStore.Equipment.showPop = false
  if (currentBar.value == item) return
  infrastructureClear()
  currentBar.value = item
  if (currentBar.value == '起降设施') {
    addQjss()
  } else if (currentBar.value == '通信基站') {
    addTdj()
  } else if (currentBar.value == '监视设备') {
    flyNumStore.setRadioShow(true)
    addJsdev()
    addRadar()
  }
}
onMounted(() => {
  infrastructureInit()
})
onUnmounted(() => {
  flyNumStore.showUi = false
  Radarjs.clear()
  popStore.RiseLand.showPop = false
  popStore.Equipment.showPop = false
  infrastructureClear()
})
</script>
<template>
  <Qjss v-if="currentBar == '起降设施'" />
  <Tdjdev v-if="currentBar == '通信基站'" />
  <Jcdev v-if="currentBar == '监视设备' && showUi === false" />
  <Qxzb v-if="currentBar == '气象设备' && showUi === false" />
  <Radar v-if="showUi === true" />
  <BottomBar :list="list" @chosedBar="chosedBar" />
  <MonitorPop />
  <RiseLandPop />
  <EquipmentPop />
</template>
<style scoped lang="scss"></style>
